<script setup lang="ts">

</script>

<template>
    <div class="footer">
        <div class="footer-content">
            <img class="footer-content-img" src="@/assets/logo.png" alt="">
            <div class="footer-content-nav">
                <div class="footer-content-title">网站导航</div>
                <div class="footer-content-nav-list">
                    <a href="/" class="footer-content-nav-item">网站首页</a>
                    <a href="/smartClinic?department=3" class="footer-content-nav-item">智慧门诊</a>
                    <a href="/healthManagement?type=0" class="footer-content-nav-item">健康管理</a>
                    <a href="/drugManagement" class="footer-content-nav-item">药品管理</a>
                    <a href="/aboutUs" class="footer-content-nav-item">关于我们</a>
                    <a href="/personalCenter" class="footer-content-nav-item">个人中心</a>
                </div>
            </div>
            <div class="footer-content-contact">
                <div class="footer-content-title">联系我们</div>
                <div class="footer-content-contact-list">
                    <div class="footer-content-contact-item">公司电话：123456789</div>
                    <div class="footer-content-contact-item">公司邮箱：123456789@qq.com</div>
                    <div class="footer-content-contact-item">公司地址：广州市从化区</div>
                </div>
            </div>
        </div>
        <div class="footer-name">2024 版权所有：广州软件学院</div>
    </div>
</template>

<style scoped lang="scss">
.footer {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 36vh;
    background-color: #45c998;
    margin-top: 10vh;

    .footer-content {
        display: flex;
        width: 60vw;
        height: 28vh;
        color: #fff;
        margin: 0 auto;
        border-bottom: 0.1vw solid #fff;

        .footer-content-img {
            height: 9vh;
            margin-top: 10vh;
        }

        .footer-content-nav {
            width: 10vw;
            margin-left: 10vw;
            margin-top: 6vh;


            .footer-content-nav-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .footer-content-nav-item {
                    font-size: 0.9vw;
                    color: #fff;
                    margin: 1vh 0;
                }
            }
        }

        .footer-content-title {
            font-size: 1.1vw;
            margin-bottom: 2vh;
        }

        .footer-content-contact {
            margin-top: 6vh;
            margin-left: 10vw;

            .footer-content-contact-list {
                display: flex;
                flex-direction: column;

                .footer-content-contact-item {
                    font-size: 0.9vw;
                    margin: 1vh 0;
                }
            }
        }
    }

    .footer-name {
        margin-top: 2vh;
        text-align: center;
        color: #fff;
        font-size: 1vw;
    }
}
</style>